<template>
  <basic-container class="infoAll">
    <el-row :gutter="20">
      <el-col :span="5">
        <p class="treeTitle">消息中心</p>
        <leftTree :treeData="treeData"></leftTree>
      </el-col>
      <el-col :span="19">
        <tabsPane :tabList="tabList" @changeTabsPane="tabChange"></tabsPane>
        <rightTable :tableOption="tableOption" :tableData="tableData"></rightTable>
      </el-col>
    </el-row>
  </basic-container>
</template>
<script>
  import leftTree from "./component/leftTree";
  import rightTable from "./component/rightTable";
  import tabsPane from "../../page/tabsPane";
  export default {
    components:{
      leftTree,
      rightTable,
      tabsPane
    },
    mounted() {
      console.log(this.treeData)
    },
    data(){
      return{
        treeData:[
          {
            id:'1',
            label:'消息',
            children:[
              {
                id:'11',
                label:'问题反馈',
              },{
                id:'12',
                label:'消息类型2',
                children:[]
              },{
                id:'13',
                label:'消息类型3',
                children:[]
              },
            ]
          }
        ],
        tableOption:{
          tag:'info',
          menu:false,
          addBtn:false,
          // columnBtn:false,
          // refreshBtn:false,
          align:'center',
          menuAlign:'center',
          index:true,indexLabel:'序号',
          selection:true,
          selectClearBtn:false,
          searchMenuPosition:'right',
          column:[
            {
              label:'主题',
              prop:'theme',
              search:true,
              order:1,
            },
            {
              label:'内容',
              prop:'content',
              order:4,
              span:24,
              component:'AvueUeditor'
            },
            {
              label:'紧急程度',
              prop:'urgency',
              search:false,
              order:2,
            },{
              label: "接收时间",
              prop: "date",
              type: "date",
              search:true,
              searchSpan:10,
              searchRange:true,
              format: "yyyy-MM-dd hh:mm:ss",
              valueFormat: "yyyy-MM-dd hh:mm:ss",
              order:3,
            },
          ]
        },
        tableData:[
          {
            theme:'普通通知',
            content:'关于江西科晨技术公司2021年第一次物资集中采购招标澄清事宜',
            urgency:'紧急',
            date:'2021-07-22 12:22:25'
          },
          {
            theme:'普通通知',
            content:'江苏齐天电力建设集团有限公司2021年7月第一批服务、施工非招标需求计划采购 邀请竞谈第一轮报价公示',
            urgency:'紧急',
            date:'2021-07-22 12:22:25'
          },
          {
            theme:'普通通知',
            content:'关于小黄人系列重庆市电力公司省管产业单位2021年物资框架集中招标采购中标人不平衡报价审查结果公告',
            urgency:'紧急',
            date:'2021-07-22 12:22:25'
          },
          {
            theme:'普通通知',
            content:'关于3021019新疆送变电有限公司2021年合格分包商入围及物资框架公开招标采购线下报名的通知',
            urgency:'紧急',
            date:'2021-07-22 12:22:25'
          },
        ],
        tabList:[
          {
            name:'业务消息',
            label:'业务消息',
          },
          {
            name:'预警消息',
            label:'预警消息',
          },
          {
            name:'系统消息',
            label:'系统消息',
          },
        ]
      }
    },
    methods:{
      tabChange(tab){
        console.log(tab)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .basic-container{
    .el-row{
      height: 100%;
    }
    .el-col{
      background: #fff;
      padding: 18px;
      height: 100%;
    }
    .treeTitle{
      padding: 0 15px;
      margin: 0;
    }
  }
</style>
<style lang="scss">
  .basic-container.infoAll{
    .el-card{
      background: none;
      height: 100%;
    }
    .el-card__body{
      padding: 0px;
      background: none;
      height: 100%;
    }
  }
</style>

